<template>
  <div v-loading="loading">
    <div>
      <el-input v-model="textarea" style="width: 240px" :rows="10" type="textarea" placeholder="复制系列到单元格" />
      <div style="height: 5px" />
      <el-button type="primary" :disabled="textarea.length === 0" @click="submit">提交</el-button>
      <el-divider />
    </div>
    <el-space wrap>
      <el-tag v-for="item in allSeries.filter((r) => !r.Disable)" :key="item.Pk" :closable="isAdmin" type="primary" @close="handleClose(item)">{{ item.SeriesName }}</el-tag>
    </el-space>
    <el-divider>以下为失效清单</el-divider>
    <el-space wrap>
      <el-tag v-for="item in allSeries.filter((r) => r.Disable)" :key="item.Pk" type="error">{{ item.SeriesName }}</el-tag>
    </el-space>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { SeriesModel } from '@/model/seriesmodel';
import { listSeries, saveSeries, disableSeries } from '@/api/series';
import { useUserStore } from '@/stores/userInfo';
import { ElMessage } from 'element-plus';
const allSeries = ref<SeriesModel[]>([]);
const textarea = ref('');
const loading = ref(false);
const user = useUserStore();
const isAdmin = ref(user.user?.IsRoot);
listSeries().then((r) => {
  allSeries.value = r.Data!;
});
const submit = () => {
  const myArray = textarea.value.trim().split('\n');
  for (let i = 0; i < myArray.length; i++) {
    if (myArray[i].length > 20) {
      ElMessage.warning('[' + myArray[i] + ']的长度已经超过20个字，请考虑缩短字数');
      return;
    }
    if (myArray[i].length === 0) {
      ElMessage.warning('第[' + i + ']行为空行');
      return;
    }
  }
  loading.value = true;
  saveSeries(textarea.value.trim())
    .then((r) => {
      loading.value = false;
      r.Data?.forEach((x) => {
        allSeries.value.push(x);
      });
      if (r.Message === '') {
        ElMessage.info('操作成功');
        textarea.value = '';
      } else {
        ElMessage.warning(r.Message);
      }
    })
    .catch((ex) => {
      loading.value = false;
    });
};
const handleClose = (item: SeriesModel) => {
  loading.value = true;
  disableSeries(item.Pk!)
    .then((r) => {
      item.Disable = true;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};
</script>
